<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body {margin: 0}
	header {height: 100px; background-color: #9f3}
	article {padding: 10px; background-color: #cf6; overflow: hidden; zoom:1; position: relative;}
	aside {width: 200px; height: 300px; background-color: #f06; float: left; position: absolute; left: 10px; top: 10px;}
	section {margin-left: 210px; background-color: #f90; height: 300px;}
	footer {height: 100px;background-color: #f67;}

	header,article,aside,section,footer{display: block;}
	</style>
	<script type="text/javascript">
	document.createElement('header');
	document.createElement('article');
	document.createElement('aside');
	document.createElement('section');
	document.createElement('footer');
	</script>
</head>
<body>
	<header>页面头部</header>

	<article>
		<aside>侧边栏</aside>
		<section>内容区域</section>
	</article>

	<footer>页面底部</footer>
</body>
</html>